<template>
<div>
     <div class="detail-header">
        <t-space size="2">
        <RollbackIcon />
        <t-divider layout="vertical" />
        <t-typography-text strong>TDesign (strong)</t-typography-text>
        </t-space>
    </div>
    <t-row>
        <t-form
        ref="form"
        :data="formData"
        layout="inline"
        scroll-to-first-error="smooth"
        label-width="2px"
        @reset="onReset"
        @submit="onSubmit"
        >
        <t-form-item name="name">
            <t-input v-model="formData.name" placeholder="请输入设备名称"></t-input>
        </t-form-item>
        <t-form-item name="code">
            <t-input v-model="formData.code" placeholder="请输入设备编码"></t-input>
        </t-form-item>
        <t-form-item>
            <t-space size="small">
            <t-button theme="primary" type="submit">查询</t-button>
            <t-button theme="default" variant="base" type="reset">重置</t-button>
            </t-space>
        </t-form-item>
        </t-form>
    </t-row>
    <div class="data-content">
        <div class="data-header">
            <t-space size="4px">
                <t-button  variant="outline" theme="primary">
                <template #icon><add-icon /></template>
                新增设备</t-button>
              
            </t-space>
            
        </div>
        <DataTable></DataTable>
    </div>
    
</div>
</template>
<style scoped>
.detail-header{
    padding: 4px 2px;
}
.t-form-inline .t-form__item{
    margin-right: 0px;
}
.data-content{
    padding: 2px;
    background-color: #fff;
}
.data-header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

</style>
<script setup>
import {RollbackIcon,AddIcon} from 'tdesign-icons-vue-next';

import { reactive,ref } from 'vue';
import DataTable from '@/components/table/DataTable.vue';

const form = ref();
const formData = reactive({
  name: '',
  code:''
});

const columns = ref([
    { colKey: 'applicant', title: '申请人', width: '100', },
    {
      colKey: 'status',
      title: '申请状态',
    },
    { colKey: 'channel', title: '签署方式' },
    { colKey: 'detail.email', title: '邮箱地址', ellipsis: true },
    { colKey: 'createTime', title: '申请时间' },
  ]);

const onReset = () => {
  MessagePlugin.success('重置成功');
};

const onSubmit = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    MessagePlugin.success('提交成功');
  } else {
    console.log('Validate Errors: ', firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};

const displayColumns = ref(['channel', 'detail.email']);


</script>